

<style scoped>
    /*初始化属性*/
    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    #signInMian{
        background-image: url("/public/static/img/signInBackground.jpg");
        background-repeat: no-repeat;
        background-size: 100%;
        width: 100%;
        height: 100%;
    }

    .mainPart{
        width: 1000px;
        height: 500px;
        border: 4px solid #ebe5ff;
        margin: 20px auto auto;
        opacity: 0.8;
        background-color: #ebe5ff;
        border-radius: 5px;
    }

    .explain{
        float: left;
    }

    /*设置第一个P标签*/
    .explain p:first-child{
        color: #ff956e;
        font-size: 25px;
        margin-left: 10px;
        margin-top: 10px;
    }

    /*设置最后一个P标签*/
    .explain p:last-child{
        margin-left: 10px;
    }

    .tableArea{
        float: left;
        width:500px;
        height:400px;
        margin-left: 70px;
        margin-top: 50px;
    }
    /*设置图片*/
    #picture{
        position: absolute;
        z-index: -1;
        opacity: 0.5;
        width: 995px;
        height:495px;
    }

    .rightTip{
        float: right;
    }
    .rightTip a{
        color: #ff94d7;
        text-decoration: none;
    }
    .rightTip a:hover{
        color: #ff3b31;
    }


    /*中间的div的表单区域设置*/
    .tableData{
        width: 400px;
        height: 350px;
        margin: auto;
    }
    /*设置fieldset*/
    fieldset{
        height: 396px;
    }
    /*设置表格*/
    .dataTableLeft{
        width: 80px;
        text-align: right;
    }
    .dataTableRight{
        padding-left: 20px;
    }

    /*设置输入框*/
    #username,#password,#perName,#phoneNumber,#number,#date,#email{
        border: 1px solid rgba(203,197,198,0.03);
        border-radius: 5px;
        height: 27px;
        width:235px;
        padding-left: 5px;
    }

    /*设置提交按钮*/
    #sub{
        width: 120px;
        height: 40px;
        background-color: rgba(84,83,87,0.11);
        border: 1px solid #faf7f7;
        border-radius: 10px;
        color: #deebff;
    }
    .subTd{
        text-align: center;
    }

    /*单独设置验证码框*/
    #number{
        width:100px;
    }
    /*单独设置验证码图片*/
    #numberPicture{
        /*设置垂直居中*/
        vertical-align: middle;
        width:130px;
        height:35px;
    }
    /*单独设置性别选择框旁边的文字*/
    .sex{
        font-size: 18px;
    }


</style>
<template>
        <div id="signInMian">
            <div class="mainPart">
            <div class="explain">
                <p>新用户注册</p>
                <p>USER REGISTER</p>
            </div>

            <div class="tableArea">

                <form method="post" action="http:127.0.0.1:3000" onsubmit = "return false">

                    <fieldset>
                        <legend>新用户注册</legend>
                        <table class="tableData">

                            <tr>
                                <td class="dataTableLeft"><label>用户名</label></td>
                                <td  class="dataTableRight">
                                    <input type="text" placeholder="请输入用户名"
                                        id="username" required="required" min="3" max="8" v-model="usernameValue">
                                </td>
                            </tr>


                            <tr>

                                <td class="dataTableLeft"><label>密码</label></td>
                                <td class="dataTableRight"><input type="password" placeholder="请输入密码"
                                                                id="password" required="required" min="3" max="8" v-model="passwordValue"></td>

                            </tr>
                            <tr>
                                <td class="dataTableLeft"><label>出生日期</label></td>
                                <td class="dataTableRight">
                                    <input type="date" id="date" v-model="dateValue" required>
                                </td>
                            </tr>
                            <tr>

                                <td class="dataTableLeft"><label>Email</label></td>
                                <td class="dataTableRight"><input type="email"
                                                        id="email" placeholder="请输入邮箱" 
                                                        required="required" v-model="emailValue"></td>
                            </tr>
                            <tr>

                                <td class="dataTableLeft"><label>验证码</label></td>
                                <td class="dataTableRight"><input type="text" placeholder="请输入验证码"
                                                                id="number" required="required" v-model="numberValue" @change="isNumberValueRules">
                                    <em id="numberPicture">{{ timeIndex }}</em>
                                    <button style="margin-left: 10px;" @click="gainVerCode" id="gainVerCodebtn" :disabled="btnDisabled">获取验证码</button>
                                </td>
                            </tr>
                            <tr>
                                <td  class="subTd" colspan="2">
                                    <input type="submit" value="注册" id="sub" @click="submitInsert(e)">
                                </td>
                            </tr>
                            <tr>
                            </tr>
                        </table>
                    </fieldset>
                </form>
            </div>

                <div class="rightTip">
                    <p>已有账号？<router-link :to="{name:'login'}">立即登入</router-link> </p>

                </div>
            </div>
        </div>
</template>

<script setup>
import {useCookies} from "vue3-cookies"
import axios from "axios";
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import { loadRouteLocation } from "vue-router";


const {cookies} = useCookies();
//四个登录输入框的值
let usernameValue = ref("")
let passwordValue = ref("")
let emailValue = ref("")
let numberValue = ref("")
let dateValue = ref("")
//防止多次刷qq验证的值
let btnDisabled = ref(null)
//显示的秒数
let timeIndex;
//返回的验证码
let tempVerCode;
function ispasswordValueRules(){
    let pattern = /^[\w]{3,8}$/;
    if (pattern.test(passwordValue.value)) {
        return true
    }else{
        ElMessage({
            type:"error",
            message:"password is error(请输入3位到8位数字或者字母以及下滑线)"
        })
        return false
    }
}
function isNumberValueRules(){
    if (tempVerCode == numberValue) {
        return true
    }else{
        return false;
    }
}
function isUsernameValueRules() {
    let pattern = /^[\w]{3,8}$/;
    if (pattern.test(usernameValue.value)) {
        return true
    }else{
        ElMessage({
            type:"error",
            message:"Username is error(请输入3位到8位数字或者字母以及下滑线)"
        })
        return false
    }
}
function isEmailValueRules(){
    let pattern = /^[1-9][0-9]{4,10}@qq.com$/
    if (pattern.test(emailValue.value)) {
        return true
    }else{
        ElMessage({
            type:"error",
            message:"QQ emaill is error(格式有误)"
        })
        return false
    }
}
function checkEmailRepeat(QQemail){
    axios({
        method:"get",
        params:{
            mailbox:QQemail
        },
        url:"http://127.0.0.1:3000/login/checkQQemailrepeat"
    }).then((data)=>{
        console.log(data);
    })
}
function gainVerCode(){
    if (isEmailValueRules()) {
        let check = checkEmailRepeat(emailValue.value)
        btnDisabled.value = true
        timeIndex = ref(60)
        let temInterval = setInterval(()=>{
            timeIndex.value --;
        },1000)
        setTimeout(()=>{
            //清除定时器
            clearInterval(temInterval)
            //重新设定秒数
            timeIndex = ref(60)
            //去除disabled属性
            btnDisabled.value = null
            //去除验证码
            tempVerCode = null;
        },60000)
        axios({
            method:"get",
            params:{
                code:emailValue.value
            },
            url:"http://127.0.0.1:3000/login/getVerifcationCode"
        }).then((value)=>{
            tempVerCode = value.code
        })
    }
};
function gainAge(){
    const nowTimeYear = Number.parseInt(new Date().getFullYear())
    const setTimeYear = Number.parseInt(dateValue.value.toString().split("-")[0]);
    console.log(nowTimeYear - setTimeYear);
    if (nowTimeYear-setTimeYear<0) {
        return 1;
    }
    return nowTimeYear-setTimeYear
}
function isDateValue(){
    if(dateValue.value ==''){
        ElMessage({
            message:"date is null(请输入出生日期)",
            type:'error'
        })
        return false
    }else{
        return true
    }
}
function submitInsert(){
    if (ispasswordValueRules()&&isNumberValueRules()&&isUsernameValueRules()&&isEmailValueRules()&&isDateValue()) {
        axios({
            method:'put',
            url:"http://127.0.0.1:3000",
            params:{
                id:null,
                name:usernameValue.value,
                age:gainAge(),
                signTime:new Date().toLocaleString(),
                mailbox:emailValue.value,
                password:passwordValue.value,
            }
        })
        location.href("/login/login")

    }
}

</script>